<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en-US"><head>



<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="en">

<meta name="description" content="Documentation of jsDraw2D Javascript 2D Graphics Library. Class and API reference.">
<meta name="keywords" content="jsdraw2d documentation, jsdraw2d help, javascript graphics library, javascript graphics documentation">
<title>Documentation of jsDraw2D Javascript 2D Graphics Library</title>
<link rel="stylesheet" type="text/css" href="jsdraw-docs_files/jsdraw2d.css" media="screen">
<link media="all" href="jsdraw-docs_files/widget24.css" type="text/css" rel="stylesheet"><script src="jsdraw-docs_files/p.txt"></script></head><body>
<script type="text/javascript">
    var addthis_disable_flash = true;
</script>
<div class="container">
<div class="main">


<div class="header">
<div class="title">
<h1>
<a href="http://jsdraw2d.jsfiction.com/"><img src="jsdraw-docs_files/jsdraw2d.jpg" alt="jsDraw2D Graphics Library for JavaScript" border="0" height="67" width="243"></a>
</h1>
</div>
</div>

<div class="content">

<div class="grarybg">
    <div>
    <a href="http://www.jsfiction.com/">jsFiction</a> | 
    <a href="http://jsdraw2d.jsfiction.com/">jsDraw2D</a> | 
    <a href="http://jsdraw2d.jsfiction.com/viewsourcecode.htm">View Source Code</a> |		            
    <a href="http://jsdraw2d.jsfiction.com/download.htm">Download</a> | 
    <a href="http://jsdraw2d.jsfiction.com/#license">License</a> |	
    <a href="http://www.jsfiction.com/contact.htm">Contact</a>	
    </div>
</div>
      <div class="section">
	    <h2>
		Documentation of <i>jsDraw2D</i> Javascript 2D Graphics Library&nbsp;          	    
        <!-- AddThis Button BEGIN -->
        <a href="http://www.addthis.com/bookmark.php" onclick="addthis_url   = location.href; addthis_title = document.title; return addthis_click(this);" target="_blank"><img src="jsdraw-docs_files/button1-bm.gif" alt="Bookmark and Share" border="0" height="16" width="125"></a> <script type="text/javascript">var addthis_pub = 'sameer_swapna';</script><script type="text/javascript" src="jsdraw-docs_files/widget.txt"></script>  
        <!-- AddThis Button END -->
        </h2>
        
<p>&nbsp; <b>jsDraw2D</b> is a Javascript library to draw 2D graphics on web pages inside web browser. 
The library is entirely written in Javascript and does not need any plug-in or additional software to run/execute.
The javascript source code of the library is open and free under "Creative Commons 3.0 Unported" license.
This documentation describes the various javascript classes along with their methods (APIs) available in the jsDraw2D library.
</p>
<br><br>
<p><b>Classes:</b></p>
<ul>
<li><a href="#jsColor">jsColor</a></li>
<li><a href="#jsFont">jsFont</a></li>
<li><a href="#jsPen">jsPen</a></li>
<li><a href="#jsPoint">jsPoint</a></li>
<li><a href="#jsGraphics">jsGraphics</a></li>
</ul>
</div>

<div class="section">
<p id="jsColor"><b>Class: <span style="color: rgb(0, 0, 255);">jsColor</span></b></p>
<p>This class holds the color information and provides some
color related basic functions.</p>
<p>&nbsp;</p>

<p><b>Constructors:</b></p>

<p><b><span style="color: blue;">jsColor()</span></b></p>

<p>By default the <i>jsColor</i> object is created with black color.</p>

<p>&nbsp;</p>

<p><b><span style="color: blue;">jsColor(hex)</span></b></p>

<p>Creates <i>jsColor</i> object with specified hexadecimal value. </p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>hex</p>
  </td>
  <td valign="top" width="197">
  <p><i>String</i> </p>
  </td>
  <td valign="top" width="197">
  <p>Hexadecimal value of the color. The value can be specified
  in the similar way as that of the HTML elements. Eg. “#A45F22”, “F22E55”.</p>
  </td>
 </tr>
</tbody></table>

<p><b>&nbsp;</b>&nbsp;</p>

<p><b><span style="color: blue;">jsColor(colorName)</span></b></p>

<p>Creates <i>jsColor</i> object with specified name of color. </p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>colorName</p>
  </td>
  <td valign="top" width="197">
  <p><i>String</i> </p>
  </td>
  <td valign="top" width="197">
  <p>One of the 16 color names also can be specified from
  following, </p>
  <p>"aqua", "black", "blue", "fuchsia",
  "green", "gray", "lime", "maroon", "navy",
  "olive", "purple", "red", "silver", "teal",
  "white", "yellow".</p>
  <p>&nbsp;</p>
  </td>
 </tr>
</tbody></table>

<p>&nbsp;&nbsp;</p>

<p><b>Methods:</b></p>

<p><b><span style="color: blue;">setHex(hex)</span></b></p>

<p><b>Description:</b> Sets the color of an existing <i>jsColor</i>
object with specified hexadecimal value. </p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>hex</p>
  </td>
  <td valign="top" width="197">
  <p><i>String</i> </p>
  </td>
  <td valign="top" width="197">
  <p>Hexadecimal value of the color. The value can be specified
  in the similar way as that of the HTML elements. Eg. “#A45F22”, “F22E55”.</p>
  </td>
 </tr>
</tbody></table>

<p><b>&nbsp;</b>&nbsp;</p>

<p><b><span style="color: blue;">getHex()</span></b></p>

<p><b>Description: </b>Gets the hexadecimal value of the <i>jsColor</i>
object.</p>

<p><b>Return: </b>Returns hexadecimal value of the <i>jsColor</i>
object. Type: String</p>

<p>&nbsp;</p>

<p><b><span style="color: blue;">setRGB(redValue, greenValue, blueValue)</span></b></p>

<p><b>Description: </b>Sets the color of an existing <i>jsColor</i>
object with specified red, green and blue component values (RGB).</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>redValue</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i> </p>
  </td>
  <td valign="top" width="197">
  <p>Red component value of the <i>jsColor</i>. The value
  should be whole number ranging from 0 to 255.</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>greenValue</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i> </p>
  </td>
  <td valign="top" width="197">
  <p>Green component value of the <i>jsColor</i>. The value
  should be whole number ranging from 0 to 255.</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>blueValue</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i> </p>
  </td>
  <td valign="top" width="197">
  <p>Blue component value of the <i>jsColor</i>. The value
  should be whole number ranging from 0 to 255.</p>
  </td>
 </tr>
</tbody></table>

<p>&nbsp;</p>

<p><b><span style="color: blue;">getRGB()</span></b></p>

<p><b>Description: </b>Gets the red, green and blue components
(RGB values) of the <i>jsColor</i> object.</p>

<p><b>Return: </b>Returns array of red, green and blue
components (RGB values) of the <i>jsColor</i> object. Each value is a whole
number ranging from 0 to 255. Type: Array</p>

<p>&nbsp;</p>

<p><b><span style="color: blue;">getDarkerShade(value)</span></b></p>

<p><b>Description: </b>Gets the darker color shade of the <i>jsColor</i>
object by specified value. A new <i>jsColor</i> object is returned by
subtracting the specified value from each red, green and blue component of the <i>jsColor</i>
object. </p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>value</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i> </p>
  </td>
  <td valign="top" width="197">
  <p>Value which is to be subtracted from each of the red,
  green and blue component of the <i>jsColor</i> object.</p>
  </td>
 </tr>
</tbody></table>

<p><b>Return: </b>Returns the new <i>jsColor</i> object having
darker shade of the color. Type: <i>jsColor</i></p>

<p><b><span style="color: blue;">&nbsp;</span></b>&nbsp;</p>

<p><b><span style="color: blue;">getLighterShade(value)</span></b></p>

<p><b>Description: </b>Gets the lighter color shade of the <i>jsColor</i>
object by specified value. A new <i>jsColor</i> object is returned by adding
the specified value to each red, green and blue component of the <i>jsColor</i>
object. </p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>value</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i> </p>
  </td>
  <td valign="top" width="197">
  <p>Value which is to be added to each of the red, green and
  blue component of the <i>jsColor</i> object.</p>
  </td>
 </tr>
</tbody></table>

<p><b>Return: </b>Returns the new <i>jsColor</i> object having
lighter shade of the color. Type: <i>jsColor</i></p>

<p>&nbsp;</p>

<p><b><span style="color: blue;">rgbToHex(redValue, greenValue,
blueValue)</span></b></p>

<p><b>Description: </b>Shared/Static method to convert specified
RGB color value to Hexadecimal.</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>redValue</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i> </p>
  </td>
  <td valign="top" width="197">
  <p>Red component value of the <i>jsColor</i>. The value
  should be whole number ranging from 0 to 255.</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>greenValue</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i> </p>
  </td>
  <td valign="top" width="197">
  <p>Green component value of the <i>jsColor</i>. The value
  should be whole number ranging from 0 to 255.</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>blueValue</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i> </p>
  </td>
  <td valign="top" width="197">
  <p>Blue component value of the <i>jsColor</i>. The value
  should be whole number ranging from 0 to 255.</p>
  </td>
 </tr>
</tbody></table>

<p><b>Return: </b>Returns hexadecimal value converted from
specified RGB color. Returns false if parameters are invalid. Type: String</p>

<p>&nbsp;</p>

<p><b><span style="color: blue;">hexToRGB(hex)</span></b></p>

<p><b>Description: </b>Shared/Static method to convert specified
hexadecimal value to RGB color values.</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>hex</p>
  </td>
  <td valign="top" width="197">
  <p><i>String</i> </p>
  </td>
  <td valign="top" width="197">
  <p>Hexadecimal value of the color. The value can be specified
  in the similar way as that of the HTML elements. Eg. “#A45F22”, “F22E55”.</p>
  </td>
 </tr>
</tbody></table>

<p><b>Return: </b>Returns array of red, green and blue
components (RGB values) converted from the specified hexadecimal value. Each
value is a whole number ranging from 0 to 255. Returns false if parameter hex is 
invalid. Type: Array</p>

<p>&nbsp;</p>
</div>
<div class="section">
<p id="jsFont"><b>Class: <font color="#0000ff">jsFont</font></b></p>

<p>This class holds the font information which can be used by
other objects in object oriented way.</p>

<p><b>&nbsp;</b>&nbsp;</p>

<p><b>Constructor:</b></p>

<p><b><span style="color: blue;">jsFont([family], [weight], [size],
[style], [variant])</span></b></p>

<p>Creates the <i>jsFont </i>object with specified parameters.
All parameters are analogous to the commonly used CSS font properties. All
parameters are optional and if not specified, the default values will be used
while drawing the text.</p>

<p><b>Description: </b>Draws a rectangle at specified point,
width and height.</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>family</p>
  </td>
  <td valign="top" width="197">
  <p><i>String</i></p>
  </td>
  <td valign="top" width="197">
  <p>[Optional] Analogous to CSS font-family property. Font
  family name or generic name of font family.</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>weight</p>
  </td>
  <td valign="top" width="197">
  <p><i>String</i></p>
  </td>
  <td valign="top" width="197">
  <p>[Optional] Analogous to CSS font-weight property. Weight
  of the font. Possible values: "normal", "bold", "bolder",
  "lighter", "100", "200", "300", "400",
  "500", "600", "700", "800", "900"</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>size</p>
  </td>
  <td valign="top" width="197">
  <p><i>String</i></p>
  </td>
  <td valign="top" width="197">
  <p>[Optional] Analogous to CSS font-size property. Possible
  values: "xx-small", "x-small", "small",
  "medium", "large", "x-large",
  "xx-large", "smaller", "larger", size, % </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>style</p>
  </td>
  <td valign="top" width="197">
  <p><i>String</i></p>
  </td>
  <td valign="top" width="197">
  <p>[Optional] Analogous to CSS font-style property. Possible
  value: “normal”, ”italic”, “oblique”</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>variant</p>
  </td>
  <td valign="top" width="197">
  <p><i>String</i></p>
  </td>
  <td valign="top" width="197">
  <p>[Optional] Analogous to CSS font-variant property. Text
  displays either in small-caps font or normal font. Possible values: “normal”,
  “small-caps”</p>
  </td>
 </tr>
</tbody></table>

<p>&nbsp;</p>

<p><b>Properties:</b></p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Name</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>family</p>
  </td>
  <td valign="top" width="197">
  <p><i>String</i></p>
  </td>
  <td valign="top" width="197">
  <p>Analogous to CSS font-family property. Font family name or
  generic name of font family.</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>weight</p>
  </td>
  <td valign="top" width="197">
  <p><i>String</i></p>
  </td>
  <td valign="top" width="197">
  <p>Analogous to CSS font-weight property. Weight of the font.
  Possible values: "normal", "bold", "bolder", "lighter",
  "100", "200", "300", "400", "500",
  "600", "700", "800", "900"</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>size</p>
  </td>
  <td valign="top" width="197">
  <p><i>String</i></p>
  </td>
  <td valign="top" width="197">
  <p>Analogous to CSS font-size property. Possible values: "xx-small",
  "x-small", "small", "medium",
  "large", "x-large", "xx-large",
  "smaller", "larger", size, % </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>style</p>
  </td>
  <td valign="top" width="197">
  <p><i>String</i></p>
  </td>
  <td valign="top" width="197">
  <p>Analogous to CSS font-style property. Possible value:
  “normal”, ”italic”, “oblique”</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>variant</p>
  </td>
  <td valign="top" width="197">
  <p><i>String</i></p>
  </td>
  <td valign="top" width="197">
  <p>Analogous to CSS font-variant property. Text displays
  either in small-caps font or normal font. Possible values: “normal”,
  “small-caps”</p>
  </td>
 </tr>
</tbody></table>

<p><b>&nbsp;</b>&nbsp;</p>
</div>
<div class="section">
<p id="jsPen"><b>Class: <font color="#0000ff">jsPen</font></b></p>

<p>This class holds the drawing pen/stroke information. Mainly
it holds the color and width values to be used for 2D drawing. All draw methods
take <i>jsPen</i> object as a parameter. Acts like a pen for drawing.</p>

<p>&nbsp;</p>

<p><b>Constructors:</b></p>

<p><b><span style="color: blue;">jsPen()</span></b></p>

<p>By default <i>jsPen</i> object is created with black color
and 1px width.</p>

<p><b><span style="color: blue;">&nbsp;</span></b>&nbsp;</p>

<p><b><span style="color: blue;">jsPen(color, width)</span></b></p>

<p>Creates the <i>jsPen</i> object with specified color and
width.</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>color</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsColor </i></p>
  </td>
  <td valign="top" width="197">
  <p>Color of the <i>jsPen</i> object.</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>width</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>Width of the <i>jsPen</i> object.</p>
  </td>
 </tr>
</tbody></table>

<p><b>&nbsp;</b>&nbsp;</p>

<p><b>Properties:</b></p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Name</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>color</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsColor </i></p>
  </td>
  <td valign="top" width="197">
  <p>Color of the <i>jsPen</i> object.</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>width</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>Width of the <i>jsPen</i> object.</p>
  </td>
 </tr>
</tbody></table>

<p><b>&nbsp;</b>&nbsp;</p>
</div>
<div class="section">
<p id="jsPoint"><b>Class: <font color="#0000ff">jsPoint</font></b></p>

<p>This class holds the 2D drawing point information. It holds
values of x and y coordinates of the point.</p>

<p>&nbsp;</p>

<p><b>Constructors:</b></p>

<p><b><span style="color: blue;">jsPoint()</span></b></p>

<p>By default <i>jsPoint</i> object is created with (0, 0)
coordinates.</p>

<p><b><span style="color: blue;">&nbsp;</span></b>&nbsp;</p>

<p><b><span style="color: blue;">jsPoint(x, y)</span></b></p>

<p>Creates the <i>jsPoint</i> object with specified x and y
coordinates.</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>x</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number </i></p>
  </td>
  <td valign="top" width="197">
  <p>x coordinate of the point.</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>y</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>y coordinate of the point.</p>
  </td>
 </tr>
</tbody></table>

<p><b>&nbsp;</b>&nbsp;</p>

<p><b>Properties:</b></p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Name</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>x</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number </i></p>
  </td>
  <td valign="top" width="197">
  <p>x coordinate of the point.</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>y</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>y coordinate of the point.</p>
  </td>
 </tr>
</tbody></table>

<p><b>&nbsp;</b>&nbsp;</p>
</div>
<div class="section">
<p id="jsGraphics"><b>Class: <font color="#0000ff">jsGraphics</font></b></p>

<p>This is the main object in the library. This object performs
all the drawing activities.</p>

<p>&nbsp;</p>

<p><b>Constructors:</b></p>

<p><b><span style="color: blue;">jsGraphics()</span></b></p>

<p>By default <i>jsGraphics</i> object is created for the 2D
vector drawing directly on the document element.</p>

<p>&nbsp;</p>

<p><b><span style="color: blue;">jsGraphics(canvasDivElement)</span></b></p>

<p>Creates the <i>jsGraphics</i> object for the 2D vector
drawing on specified div element.</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>canvasDivElement</p>
  </td>
  <td valign="top" width="197">
  <p><i>Div Element </i></p>
  </td>
  <td valign="top" width="197">
  <p>HTML DIV element on which the shapes to be drawn. This
  element is used as a canvas for drawing the shapes, showing grid etc.</p>
  </td>
 </tr>
</tbody></table>

<p>&nbsp;</p>

<p><b>Methods:</b></p>

<p><b><span style="color: blue;">setOrigin(point)</span></b></p>

<p><b>Description:</b> Sets the specified point as the origin
of the co-ordinate system used for the 2D drawing. The new drawing is drawn
using the specified point as origin set by last call to the <i>setOrigin</i>
method. By default point (0,0) is the origin.</p>

<p>&nbsp;&nbsp;</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>point</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPoint</i></p>
  </td>
  <td valign="top" width="197">
  <p>The point to be set as a new origin. </p>
  </td>
 </tr>
</tbody></table>

<p>&nbsp;</p>

<p><b><span style="color: blue;">getOrigin()</span></b></p>

<p><b>Description: </b>Gets the existing origin of the 2D
drawing co-ordinate system. </p>

<p><b>Return: </b>Returns existing origin of the 2D drawing
co-ordinate system. Type: <i>jsPoint</i></p>

<p>&nbsp;</p>

<p><b><span style="color: blue;">setScale(value)</span></b></p>

<p><b>Description:</b> Sets the drawing scale of the <i>jsGraphics</i>
object. The new drawing is drawn as per the scale set by the last call to <i>setScale</i>
method. By default the scale value 1. Scale is the factor by which all the
metric drawing parameters are converted before drawing the actual pixels. </p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>value</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>The value of the scale to be set. </p>
  </td>
 </tr>
</tbody></table>

<p><b><span style="color: blue;">&nbsp;</span></b>&nbsp;</p>

<p><b><span style="color: blue;">getScale()</span></b></p>

<p><b>Description: </b>Gets the existing scale of the <i>jsGraphics
</i>object. </p>

<p><b>Return: </b>Returns existing scale of the <i>jsGraphics </i>object.
Type: <i>Number</i></p>

<p><b><span style="color: blue;">&nbsp;</span></b>&nbsp;</p>

<p><b><span style="color: blue;">setCoordinateSystem(name)</span></b></p>

<p><b>Description:</b> Sets the type of the 2D drawing
coordinate system to the specified one.</p>

<p>&nbsp;&nbsp;</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>name</p>
  </td>
  <td valign="top" width="197">
  <p><i>String</i></p>
  </td>
  <td valign="top" width="197">
  <p>Name of the coordinate system. Possible values are “cartecian”
  and “default” </p>
  </td>
 </tr>
</tbody></table>

<p><b><span style="color: blue;">&nbsp;</span></b>&nbsp;</p>

<p><b><span style="color: blue;">getCoordinateSystem()</span></b></p>

<p><b>Description: </b>Gets the type/name of existing 2D
drawing coordinate system. </p>

<p><b>Return: </b>Returns the type/name of existing 2D drawing
coordinate system. Type: <i>String</i></p>

<p><b><span style="color: blue;">&nbsp;</span></b>&nbsp;</p>

<p><b><span style="color: blue;">logicalToPhysicalPoint(point)</span></b></p>

<p><b>Description:</b> Converts the logical point in the 2D
drawing coordinate system to its analogous point on the canvas document or div
element.</p>

<p>&nbsp;&nbsp;</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>point</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPoint</i></p>
  </td>
  <td valign="top" width="197">
  <p>The logical point to be converted. </p>
  </td>
 </tr>
</tbody></table>

<p><b>Return: </b>Returns the point on the canvas document or
div element analogous to the specified logical point.</p>

<p><b>&nbsp;</b>&nbsp;</p>

<p><b><span style="color: blue;">drawLine(pen, point0, point1)</span></b></p>

<p><b>Description: </b>Draws a line between the specified
points.</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>pen</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPen</i></p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPen</i> object to be used for drawing line. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>point0</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPoint</i></p>
  </td>
  <td valign="top" width="197">
  <p>First point (Start point) of the line. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>point1</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPoint</i></p>
  </td>
  <td valign="top" width="197">
  <p>Second point (End point) of the line</p>
  </td>
 </tr>
</tbody></table>

<p><b>Return:</b> Returns the parent div element holding all
the content div elements of the line. Type: Div Element</p>

<p>&nbsp;&nbsp;</p>

<p><b><span style="color: blue;">drawRectangle(pen, point, width,
height)</span></b></p>

<p><b>Description: </b>Draws a rectangle at specified point,
width and height.</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>pen</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPen</i></p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPen</i> object to be used for drawing rectangle. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>point</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPoint</i></p>
  </td>
  <td valign="top" width="197">
  <p>Top-Left corner point of the rectangle. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>width</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>Width of the rectangle.</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>height</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>Height of the rectangle.</p>
  </td>
 </tr>
</tbody></table>

<p><b>Return:</b> Returns the parent div element holding all
the content div elements of the rectangle. Type: Div Element</p>

<p>&nbsp;</p>

<p><b><span style="color: blue;">drawPolyline(pen, points)</span></b></p>

<p><b>Description: </b>Draws a polyline (Connected set of
lines) connecting to the specified points.</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>pen</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPen</i></p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPen</i> object to be used for drawing polyline. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>points</p>
  </td>
  <td valign="top" width="197">
  <p><i>Array</i></p>
  </td>
  <td valign="top" width="197">
  <p>Array of points to be connected by the polyline. </p>
  </td>
 </tr>
</tbody></table>

<p><b>Return:</b> Returns the parent div element holding all
the content div elements of the polyline. Type: Div Element</p>

<p><b><span style="color: blue;">&nbsp;</span></b>&nbsp;</p>

<p><b><span style="color: blue;">drawPolygon(pen, points)</span></b></p>

<p><b>Description: </b>Draws a polygon with the specified
points as vertices.</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>pen</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPen</i></p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPen</i> object to be used for drawing polygon. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>points</p>
  </td>
  <td valign="top" width="197">
  <p><i>Array</i></p>
  </td>
  <td valign="top" width="197">
  <p>Array of points to be used as vertices of the polygon. </p>
  </td>
 </tr>
</tbody></table>

<p><b>Return:</b> Returns the parent div element holding all
the content div elements of the polygon. Type: Div Element</p>

<p>&nbsp;</p>

<p><b><span style="color: blue;">drawCircle(pen, center, radius)</span></b></p>

<p><b>Description: </b>Draws a circle with specified center
point and radius.</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>pen</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPen</i></p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPen</i> object to be used for drawing circle. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>center</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPoint</i></p>
  </td>
  <td valign="top" width="197">
  <p>Center point of the circle.</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>radius</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>Radius of the circle.</p>
  </td>
 </tr>
</tbody></table>

<p><b>Return:</b> Returns the parent div element holding all
the content div elements of the circle. Type: Div Element</p>

<p>&nbsp;</p>

<p><b><span style="color: blue;">drawEllipse(pen, center, width, height)</span></b></p>

<p><b>Description: </b>Draws an ellipse at specified center
point with specified width and height.</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>pen</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPen</i></p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPen</i> object to be used for drawing ellipse. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>center</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPoint</i></p>
  </td>
  <td valign="top" width="197">
  <p>Center point of the ellipse. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>width</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>Width of the ellipse.</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>height</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>Height of the ellipse.</p>
  </td>
 </tr>
</tbody></table>

<p><b>Return:</b> Returns the parent div element holding all
the content div elements of the ellipse. Type: Div Element</p>

<p>&nbsp;</p>

<p><b><span style="color: blue;">drawArc(pen, center, width, height,
startAngle, swapAngle)</span></b></p>

<p><b>Description: </b>Draws an elliptical arc at specified
center point with specified width, height, start angle and swap angle.</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>pen</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPen</i></p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPen</i> object to be used for drawing arc. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>center</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPoint</i></p>
  </td>
  <td valign="top" width="197">
  <p>Center point of the ellipse of which the arc is a part. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>width</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>Width of the ellipse of which the arc is a part.</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>height</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>Height of the ellipse of which the arc is a part.</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>startAngle</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>Start angle of the arc in degrees. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>swapAngle</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>Swap angle of the arc in degrees.</p>
  </td>
 </tr>
</tbody></table>

<p><b>Return:</b> Returns the parent div element holding all
the content div elements of the arc. Type: Div Element</p>

<p>&nbsp;</p>

<p><b><span style="color: blue;">drawBezier(pen, points)</span></b></p>

<p><b>Description: </b>Draws a cubic Bezier curve with the
specified four points.</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>pen</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPen</i></p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPen</i> object to be used for drawing the Bezier
  curve. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>points</p>
  </td>
  <td valign="top" width="197">
  <p><i>Array</i></p>
  </td>
  <td valign="top" width="197">
  <p>Array of four points to be used to draw the cubic Bezier
  curve.</p>
  <p>First and Fourth points are used as start and end points
  respectively while the second and third points are used as control points. &nbsp;&nbsp;</p>
  </td>
 </tr>
</tbody></table>

<p><b>Return:</b> Returns the parent div element holding all
the content div elements of the cubic Bezier curve. Type: Div Element</p>

<p>&nbsp;</p>

<p><b><span style="color: blue;">drawPolyBezier(pen, points)</span></b></p>

<p><b>Description: </b>Draws a general Bezier curve with the
specified points. The general Bezier curve can be of any degree (linear,
quadratic, cubic or more).</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>pen</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPen</i></p>
  </td>
  <td valign="top" width="197">
  <p>jsPen object to be used for drawing the Bezier curve. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>points</p>
  </td>
  <td valign="top" width="197">
  <p><i>Array</i></p>
  </td>
  <td valign="top" width="197">
  <p>Array of points to be used to draw the general Bezier
  curve.</p>
  <p>First and Fourth points are used as start and end points
  respectively while the in between points are used as control points.&nbsp;
  </p>
  </td>
 </tr>
</tbody></table>

<p><b>Return:</b> Returns the parent div element holding all the
content div elements of the general Bezier curve. Type: Div Element</p>

<p>&nbsp;</p>

<p><b><span style="color: blue;">drawCurve(pen, points, [tension])</span></b></p>

<p><b>Description: </b>Draws an open curve passing through the
specified points.</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>pen</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPen</i></p>
  </td>
  <td valign="top" width="197">
  <p>jsPen object to be used for drawing the curve. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>points</p>
  </td>
  <td valign="top" width="197">
  <p><i>Array</i></p>
  </td>
  <td valign="top" width="197">
  <p>Array of points to be used to draw the curve.&nbsp;
  </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>tension</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>[Optional] An optional parameter which specifies the
  tension value to be used to draw the curve. The default value is 0.</p>
  </td>
 </tr>
</tbody></table>

<p><b>Return:</b> Returns the parent div element holding all
the content div elements of the curve. Type: Div Element</p>

<p>&nbsp;</p>

<p><b><span style="color: blue;">drawClosedCurve(pen, points, [tension])</span></b></p>

<p><b>Description: </b>Draws a closed curve passing through the
specified points.</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>pen</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPen</i></p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPen</i> object to be used for drawing closed curve. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>points</p>
  </td>
  <td valign="top" width="197">
  <p><i>Array</i></p>
  </td>
  <td valign="top" width="197">
  <p>Array of points to be used to draw the closed curve.&nbsp;
  </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>tension</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>[Optional] An optional parameter which specifies the
  tension value to be used to draw the closed curve. The default value is 0. </p>
  </td>
 </tr>
</tbody></table>

<p><b>Return:</b> Returns the parent div element holding all
the content div elements of the closed curve. Type: Div Element</p>

<p>&nbsp;</p>

<p><b><span style="color: blue;">fillRectangle(color, point, width,
height)</span></b></p>

<p><b>Description: </b>Draws a color filled rectangle at
specified point, width and height.</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>color</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsColor</i></p>
  </td>
  <td valign="top" width="197">
  <p>Color to be used for drawing filled rectangle. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>point</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPoint</i></p>
  </td>
  <td valign="top" width="197">
  <p>Top-Left corner point of the rectangle. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>width</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>Width of the rectangle.</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>height</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>Height of the rectangle.</p>
  </td>
 </tr>
</tbody></table>

<p><b>Return:</b> Returns the parent div element holding all
the content div elements of the rectangle. Type: Div Element</p>

<p><b><span style="color: blue;">&nbsp;</span></b>&nbsp;</p>

<p><b><span style="color: blue;">fillPolygon(color, points)</span></b></p>

<p><b>Description: </b>Draws a color filled polygon with the
specified points as vertices.</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>pen</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsColor</i></p>
  </td>
  <td valign="top" width="197">
  <p>Color to be used for drawing filled polygon. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>points</p>
  </td>
  <td valign="top" width="197">
  <p><i>Array</i></p>
  </td>
  <td valign="top" width="197">
  <p>Array of points to be used as vertices of the polygon. </p>
  </td>
 </tr>
</tbody></table>

<p><b>Return:</b> Returns the parent div element holding all
the content div elements of the polygon. Type: Div Element</p>

<p><b><span style="color: blue;">&nbsp;</span></b>&nbsp;</p>

<p><b><span style="color: blue;">fillCircle(pen, center, radius)</span></b></p>

<p><b>Description: </b>Draws a color filled circle with
specified center point and radius.</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>pen</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsColor</i></p>
  </td>
  <td valign="top" width="197">
  <p>Color to be used for drawing filled circle. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>center</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPoint</i></p>
  </td>
  <td valign="top" width="197">
  <p>Center point of the circle.</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>radius</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>Radius of the circle.</p>
  </td>
 </tr>
</tbody></table>

<p><b>Return:</b> Returns the parent div element holding all
the content div elements of the circle. Type: Div Element</p>

<p><b><span style="color: blue;">&nbsp;</span></b>&nbsp;</p>

<p><b><span style="color: blue;">fillEllipse(color, center, width,
height)</span></b></p>

<p><b>Description: </b>Draws a color filled ellipse at
specified center point with specified width and height.</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>pen</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsColor</i></p>
  </td>
  <td valign="top" width="197">
  <p>Color to be used for drawing filled ellipse. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>Center</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPoint</i></p>
  </td>
  <td valign="top" width="197">
  <p>Center point of the ellipse. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>width</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>Width of the ellipse.</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>height</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>Height of the ellipse.</p>
  </td>
 </tr>
</tbody></table>

<p><b>Return:</b> Returns the parent div element holding all
the content div elements of the ellipse. Type: Div Element</p>

<p>&nbsp;</p>

<p><b><span style="color: blue;">fillArc(color, center, width, height,
startAngle, swapAngle)</span></b></p>

<p><b>Description: </b>Draws a color filled elliptical arc at
specified center point with specified width, height, start angle and swap angle.</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>pen</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsColor</i></p>
  </td>
  <td valign="top" width="197">
  <p>Color object to be used for drawing filled arc. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>center</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPoint</i></p>
  </td>
  <td valign="top" width="197">
  <p>Center point of the ellipse of which the arc is a part. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>width</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>Width of the ellipse of which the arc is a part.</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>height</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>Height of the ellipse of which the arc is a part.</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>startAngle</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>Start angle of the arc in degrees. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>swapAngle</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>Swap angle of the arc in degrees.</p>
  </td>
 </tr>
</tbody></table>

<p><b>Return:</b> Returns the parent div element holding all
the content div elements of the arc. Type: Div Element</p>

<p><b><span style="color: blue;">&nbsp;</span></b>&nbsp;</p>

<p><b><span style="color: blue;">fillClosedCurve(color, points, [tension])</span></b></p>

<p><b>Description: </b>Draws a color filled closed curve passing
through the specified points.</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>pen</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsColor</i></p>
  </td>
  <td valign="top" width="197">
  <p>Color to be used for drawing filled closed curve. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>points</p>
  </td>
  <td valign="top" width="197">
  <p><i>Array</i></p>
  </td>
  <td valign="top" width="197">
  <p>Array of points to be used to draw the closed curve.&nbsp;
  </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>tension</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>An optional parameter which specifies the tension value to
  be used to draw the closed curve. The default value is 0.</p>
  </td>
 </tr>
</tbody></table>

<p><b>Return:</b> Returns the parent div element holding all
the content div elements of the closed curve. Type: Div Element</p>

<p>&nbsp;</p>

<p><b><span style="color: blue;">drawText(text, point, [font], [color],
[width], [align])</span></b></p>

<p><b>Description: </b>Draws the specified text at specified
point location with various parameters.</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>text</p>
  </td>
  <td valign="top" width="197">
  <p><i>String</i></p>
  </td>
  <td valign="top" width="197">
  <p>The text content to be drawn. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>point</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPoint</i></p>
  </td>
  <td valign="top" width="197">
  <p>Point at which the text is to be drawn.&nbsp;
  </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>font</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsFont</i></p>
  </td>
  <td valign="top" width="197">
  <p>[Optional] Font information to be used to draw the text. If
  not specified default font is used.</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>color</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsColor</i></p>
  </td>
  <td valign="top" width="197">
  <p>[Optional] Color to be used to draw the text. If not
  specified default color is used.</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>width</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>[Optional] Width of the text. Text will be wrapped to fit
  in the specified width.</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>align</p>
  </td>
  <td valign="top" width="197">
  <p><i>String</i></p>
  </td>
  <td valign="top" width="197">
  <p>[Optional] Alignment of the text. Possible values:
  “left”,”right”,”center” and ”justify”.</p>
  </td>
 </tr>
</tbody></table>

<p><b>Return:</b> Returns the parent div element holding the
text content. Type: Div Element</p>

<p><b><span style="color: blue;">&nbsp;</span></b>&nbsp;</p>

<p><b><span style="color: blue;">drawImage(url, point, [width], [height])</span></b></p>

<p><b>Description: </b>Draws the specified image at specified
point.</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>url</p>
  </td>
  <td valign="top" width="197">
  <p><i>String</i></p>
  </td>
  <td valign="top" width="197">
  <p>Url of the image to be drawn.</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>point</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsPoint</i></p>
  </td>
  <td valign="top" width="197">
  <p>Point at which the image is to be drawn.&nbsp;
  </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>width</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>[Optional] Width of the image. By default the actual image
  width is used. </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>height</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>[Optional] Height of the image. By default the actual
  image height is used.</p>
  </td>
 </tr>
</tbody></table>

<p><b>Return:</b> Returns the parent div element holding the
text content. Type: Div Element</p>

<p><b><span style="color: blue;">&nbsp;</span></b>&nbsp;</p>

<p><b><span style="color: blue;">showGrid([range], [showRange], [color])
</span></b></p>

<p><b>Description: </b>Displays the grid as per the 2D
coordinate system.</p>

<table border="1" cellpadding="0" cellspacing="0">
 <tbody><tr>
  <td valign="top" width="197">
  <p><b>Parameter</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Type</b></p>
  </td>
  <td border-left:none;="" valign="top" width="197">
  <p><b>Description</b></p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>range</p>
  </td>
  <td valign="top" width="197">
  <p><i>Number</i></p>
  </td>
  <td valign="top" width="197">
  <p>[Optional] Grid lines interval. By default canvas-width/10
  range will be used.</p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>showRange</p>
  </td>
  <td valign="top" width="197">
  <p><i>Boolean</i></p>
  </td>
  <td valign="top" width="197">
  <p>[Optional] If true range will be displayed along x and y
  axis.&nbsp;
  </p>
  </td>
 </tr>
 <tr>
  <td valign="top" width="197">
  <p>color</p>
  </td>
  <td valign="top" width="197">
  <p><i>jsColor</i></p>
  </td>
  <td valign="top" width="197">
  <p>[Optional] Color of the grid lines. Range and axis colors
  are darker by 150 than grid color. By default grid lines are shown with&nbsp;
  RGB(200,200,200) color. </p>
  </td>
 </tr>
</tbody></table>

<p><b><span style="color: blue;">&nbsp;</span></b>&nbsp;</p>

<p><b><span style="color: blue;">hideGrid()</span></b></p>

<p><b>Description: </b>Hides (clears) the displayed grid.</p>

<p>&nbsp;</p>

<p><b><span style="color: blue;">clear()</span></b></p>

<p><b>Description: </b>Clears the graphics canvas.</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

</div>
<div class="section">
<p><b>Note: </b></p>
<p>Most of the fuctions return false for invalid parameter(s).</p>
</div>
</div>
<div class="footer">
Copyright 2009 jsFiction.com | A project by <a href="http://www.globefeed.com/">GlobeFeed.com</a> | <a href="http://www.jsfiction.com/termsofuse.htm"> Terms of Use </a>
</div>

</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script src="jsdraw-docs_files/ga.js" type="text/javascript"></script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-350192-9");
pageTracker._trackPageview();
} catch(err) {}</script>
<iframe src="jsdraw-docs_files/sh09.htm" style="border: 0pt none ; height: 1px; width: 1px; position: absolute; z-index: 100000; left: 0pt; top: 0pt;" id="_atssh"></iframe></body></html>